<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getOrderDetail } from '@/services/order'

const router = useRouter()
const route = useRoute()
const orderDetail = ref(null)
const loading = ref(false)
const error = ref('')

// 获取订单编号
const orderNo = route.params.id

// 状态映射
const statusMap = {
  1: { text: '待支付', color: '#ff6b6b', bgColor: '#fff5f5' },
  2: { text: '已支付', color: '#4dabf7', bgColor: '#e7f5ff' },
  3: { text: '待发货', color: '#ffa940', bgColor: '#fff7e6' },
  4: { text: '已发货', color: '#40c057', bgColor: '#f0fff4' },
  5: { text: '已完成', color: '#4c6ef5', bgColor: '#edf2ff' },
  6: { text: '已取消', color: '#adb5bd', bgColor: '#f8f9fa' },
  7: { text: '已退款', color: '#868e96', bgColor: '#f8f9fa' }
}

// 支付方式映射
const payTypeMap = {
  'ALIPAY': '支付宝',
  'WECHAT': '微信支付',
  'CASH': '货到付款',
  'BANK': '银行卡支付',
  'OTHER': '其他支付'
}

// 获取订单详情
async function loadOrderDetail() {
  loading.value = true
  error.value = ''
  try {
    const res = await getOrderDetail(orderNo)
    
    if (res?.code === 200 && res.data) {
      orderDetail.value = res.data
    } else {
      error.value = '获取订单详情失败'
    }
  } catch (err) {
    console.error('获取订单详情失败:', err)
    error.value = err.response?.data?.message || '获取订单详情失败，请稍后再试'
  } finally {
    loading.value = false
  }
}

// 返回订单列表
function goBack() {
  router.push('/orders')
}

// 页面挂载时加载订单详情
onMounted(() => {
  loadOrderDetail()
})
</script>

<template>
  <div class="container order-detail">
    <h2>订单详情</h2>
    
    <!-- 返回按钮 -->
    <button class="back-btn" @click="goBack">
      ← 返回订单列表
    </button>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      正在加载订单详情...
    </div>
    
    <!-- 订单详情内容 -->
    <div v-else-if="orderDetail" class="order-detail-content">
      <!-- 订单状态卡片 -->
      <div class="status-card" :style="{ backgroundColor: statusMap[orderDetail.orderMain?.orderStatus]?.bgColor || '#f8f9fa' }">
        <div class="status-icon">
          <span v-if="orderDetail.orderMain?.orderStatus === 1">🔴</span>
          <span v-else-if="orderDetail.orderMain?.orderStatus === 2">🟠</span>
          <span v-else-if="orderDetail.orderMain?.orderStatus === 3">🟡</span>
          <span v-else-if="orderDetail.orderMain?.orderStatus === 4">🟢</span>
          <span v-else-if="orderDetail.orderMain?.orderStatus === 5">🔵</span>
          <span v-else>⚪</span>
        </div>
        <div class="status-info">
          <h3 class="status-text" :style="{ color: statusMap[orderDetail.orderMain?.orderStatus]?.color || '#6c757d' }">
            {{ orderDetail.orderMain?.orderStatusDesc || statusMap[orderDetail.orderMain?.orderStatus]?.text || '未知状态' }}
          </h3>
          <p class="order-number">订单编号：{{ orderDetail.orderMain?.orderNo }}</p>
        </div>
      </div>
      
      <!-- 订单信息卡片 -->
      <div class="info-card">
        <h3>订单信息</h3>
        <div class="info-row">
          <span class="info-label">下单时间</span>
          <span class="info-value">{{ orderDetail.orderMain?.createTime || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">支付时间</span>
          <span class="info-value">{{ orderDetail.orderMain?.payTime || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">发货时间</span>
          <span class="info-value">{{ orderDetail.orderMain?.shipTime || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">完成时间</span>
          <span class="info-value">{{ orderDetail.orderMain?.finishTime || '暂无' }}</span>
        </div>
      </div>
      
      <!-- 收货信息卡片 -->
      <div class="info-card">
        <h3>收货信息</h3>
        <div class="info-row">
          <span class="info-label">收货人</span>
          <span class="info-value">{{ orderDetail.orderMain?.receiveName || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">联系电话</span>
          <span class="info-value">{{ orderDetail.orderMain?.receivePhone || '暂无' }}</span>
        </div>
        <div class="info-row info-row-full">
          <span class="info-label">收货地址</span>
          <span class="info-value full-width">{{ orderDetail.orderMain?.receiveAddress || '暂无' }}</span>
        </div>
      </div>
      
      <!-- 物流信息卡片 -->
      <div v-if="orderDetail.orderMain?.logisticsInfo" class="info-card">
        <h3>物流信息</h3>
        <div class="info-row">
          <span class="info-label">物流公司</span>
          <span class="info-value">{{ orderDetail.orderMain?.logisticsInfo?.logisticsCompany || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">物流单号</span>
          <span class="info-value">{{ orderDetail.orderMain?.logisticsInfo?.logisticsNo || '暂无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">物流状态</span>
          <span class="info-value">{{ orderDetail.orderMain?.logisticsInfo?.logisticsStatusDesc || '暂无' }}</span>
        </div>
      </div>
      
      <!-- 商品列表卡片 -->
      <div class="product-card">
        <h3>商品信息</h3>
        <div class="product-list">
          <div v-for="item in orderDetail.productList" :key="item.productId || item.id" class="product-item">
            <img v-if="item.productImage" :src="item.productImage" :alt="item.productName" class="product-image" />
            <div class="product-info">
              <div class="product-name">{{ item.productName || '未知商品' }}</div>
              <div class="product-price">¥{{ Number(item.unitPrice || 0).toFixed(2) }} x {{ item.buyQuantity || 1 }}</div>
              <div class="product-total">小计：¥{{ Number(item.totalPrice || 0).toFixed(2) }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 支付信息卡片 -->
      <div class="payment-card">
        <h3>支付信息</h3>
        <div class="payment-row">
          <span class="payment-label">订单总金额</span>
          <span class="payment-value">¥{{ Number(orderDetail.orderMain?.totalAmount || 0).toFixed(2) }}</span>
        </div>
        <div class="payment-row">
          <span class="payment-label">实付金额</span>
          <span class="payment-value payment-value-bold">¥{{ Number(orderDetail.orderMain?.payableAmount || 0).toFixed(2) }}</span>
        </div>
        <div class="payment-row">
          <span class="payment-label">支付方式</span>
          <span class="payment-value">{{ payTypeMap[orderDetail.orderMain?.payType] || orderDetail.orderMain?.payType || '暂无' }}</span>
        </div>
      </div>
      
      <!-- 支付/退款记录卡片 -->
      <div v-if="orderDetail.payRefundInfo && orderDetail.payRefundInfo.length > 0" class="refund-card">
        <h3>交易记录</h3>
        <div class="refund-list">
          <div v-for="record in orderDetail.payRefundInfo" :key="record.id || `record_${index}`" class="refund-item">
            <div class="refund-type">
              <span class="type-tag" :class="record.recordType === 1 ? 'pay' : 'refund'">
                {{ record.recordTypeDesc || (record.recordType === 1 ? '支付' : '退款') }}
              </span>
            </div>
            <div class="refund-amount">
              {{ record.recordType === 1 ? '+' : '-' }}¥{{ Number(record.amount || 0).toFixed(2) }}
            </div>
            <div class="refund-time">
              {{ record.tradeTime || '暂无时间' }}
            </div>
            <div class="refund-msg">
              {{ record.tradeMsg || '暂无信息' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 无数据状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">📝</div>
      <div class="empty-text">订单不存在或已被删除</div>
      <button class="btn btn-primary go-orders" @click="goBack">返回订单列表</button>
    </div>
  </div>
</template>

<style scoped>
/* 变量定义 */
:root {
  --primary: #e1251b;
  --secondary: #f4f4f4;
  --text-primary: #333;
  --text-secondary: #666;
  --text-tertiary: #999;
  --border: #eee;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --success: #52c41a;
  --warning: #faad14;
  --info: #4dabf7;
}

/* 基础样式 */
.order-detail {
  padding: 20px 0;
  min-height: 600px;
}

.order-detail h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.back-btn {
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: var(--primary);
}

/* 错误和加载状态 */
.error-message {
  padding: 12px 16px;
  background-color: #fff2f0;
  color: #ff4d4f;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid #ffccc7;
}

.loading-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 订单详情容器 */
.order-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 状态卡片 */
.status-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.status-icon {
  font-size: 48px;
  margin-right: 20px;
}

.status-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.order-number {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 信息卡片 */
.info-card {
  background-color: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.info-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px 0;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row-full {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
  min-width: 100px;
}

.info-value {
  font-size: 14px;
  color: var(--text-primary);
  text-align: right;
  flex: 1;
}

.info-value.full-width {
  text-align: left;
  line-height: 1.5;
}

/* 商品卡片 */
.product-card {
  background-color: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.product-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 16px;
  border: 1px solid var(--border);
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-name {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

.product-price {
  font-size: 14px;
  color: var(--text-secondary);
}

.product-total {
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}

/* 支付信息卡片 */
.payment-card {
  background-color: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.payment-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
}

.payment-row:last-child {
  margin-bottom: 0;
}

.payment-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.payment-value {
  font-size: 14px;
  color: var(--text-primary);
}

.payment-value-bold {
  font-size: 18px;
  color: var(--primary);
  font-weight: 600;
}

/* 退款记录卡片 */
.refund-card {
  background-color: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.refund-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.refund-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.refund-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  gap: 16px;
}

.refund-item:last-child {
  border-bottom: none;
}

.type-tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.type-tag.pay {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-tag.refund {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.refund-amount {
  font-size: 16px;
  font-weight: 600;
  min-width: 120px;
}

.refund-time {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: auto;
}

.refund-msg {
  width: 100%;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 20px;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  color: var(--text-tertiary);
  margin-bottom: 30px;
}

/* 按钮样式 */
.btn {
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: #cf1122;
  border-color: #cf1122;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(225, 37, 27, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail {
    padding: 10px 0;
  }
  
  .order-detail h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .status-card {
    padding: 15px;
  }
  
  .status-icon {
    font-size: 36px;
    margin-right: 15px;
  }
  
  .status-info h3 {
    font-size: 18px;
  }
  
  .info-card,
  .product-card,
  .payment-card,
  .refund-card {
    padding: 15px;
  }
  
  .info-card h3,
  .product-card h3,
  .payment-card h3,
  .refund-card h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .product-image {
    width: 80px;
    height: 80px;
  }
  
  .refund-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .refund-time {
    margin-left: 0;
    width: 100%;
  }
  
  .payment-value-bold {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .order-detail-content {
    gap: 15px;
  }
  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-value {
    text-align: left;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}
</style>